<template>
    <div class="bill-container">
        <Title :title="title" @click-more="skipMore" />
        <section class="bill-list-container">
            <ul>
                <router-link tag="li" :to="'/detail/'+item.song_id" v-for="(item,index) in list" :key="index">
                    <img :src="item.pic_s500" alt />
                    <p>{{item.title}}</p>
                </router-link>
            </ul>
        </section>
    </div>
</template>

<script>
    import Title from "./Title";
    import {getBillList} from "@/api/baidu-music";
    // 插槽
    // props
    //    1. type
    //    2. size

    export default {
        components: {
            Title,
        },
        props: {
            title: {
                type: String,
            },
            type: {
                type: [String, Number],
            },
            size: {
                type: [String, Number],
            },
        },
        data() {
            return {
                list: [],
            };
        },
        created() {
            console.log("类型" + this.type + "个数" + this.size);
            getBillList(this.type, this.size).then((res) => {
                this.list = res.songList;
            });
        },
        methods: {
            skipMore() {
                // 跳转到更多
                this.$router.push({
                    // 根据名字跳转
                    name: "moreMusic",
                    // 跳转的参数
                    params: {
                        title: this.title,
                        type: this.type,
                    },
                });
            },
        },
    };
</script>

<style lang="less" scoped>
    .bill-container {
        background-color: #fff;
        margin-bottom: 10px;
    }

    // 列表的盒子
    .bill-list-container {
        padding: 10px;

        ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;

            li {
                width: calc(100% / 3);
                box-sizing: border-box;
                padding: 5px;

                img {
                    width: 100%;
                }
            }
        }
    }
</style>
